import React from 'react';
import styles from '../styles/styles.less';
import {onMenu,formatNumber} from '../utils/tools';

export default function SliderItem({data, dispatch}) {
	return (
		<div className="home-list">
			<table className="detail-row">
			<tbody>
				<tr>
					<th className="detail-icon"><img src="img/icon-income.png" /></th>
					<th className="detail-name">收入</th>
					<th className="detail-num">{formatNumber(data.income)}</th>
					<th className="detail-txt" onClick={()=>{onMenu('/income',dispatch);}}>明细</th>
					<th className="detail-img"><img src="img/detail-img.png" /></th>
				</tr>
				<tr>
					<th className="detail-icon"><img src="img/icon-cost.png" /></th>
					<th className="detail-name">支出</th>
					<th className="detail-num">{formatNumber(data.outlay)}</th>
					<th className="detail-txt" onClick={()=>{onMenu('/outlay',dispatch);}}>明细</th>
					<th className="detail-img"><img src="img/detail-img.png" /></th>
				</tr>
				<tr>
					<th className="detail-icon"><img src="img/icon-bank.png" /></th>
					<th className="detail-name">银行存款</th>
					<th className="detail-num">{formatNumber(data.bank)}</th>
					<th className="detail-txt" onClick={()=>{onMenu('/bank',dispatch);}}>明细</th>
					<th className="detail-img"><img src="img/detail-img.png" /></th>
				</tr>
				<tr>
					<th className="detail-icon"><img src="img/icon-cash.png" /></th>
					<th className="detail-name">现金</th>
					<th className="detail-num">{formatNumber(data.cash)}</th>
					<th className="detail-txt" onClick={()=>{onMenu('/cash',dispatch);}}>明细</th>
					<th className="detail-img"><img src="img/detail-img.png" /></th>
				</tr>
				</tbody>			
			</table>
		</div>
	);
}